<template>
    <el-dialog
        title="返佣比例详情"
        center
        :visible.sync="visible"
        width="1200"
        class="audit-confirm"
        :before-close="handleCancel"
    >
    <div class="commissionsDialog">
        <PointAndRebate
            ref="PointAndRebateRef"
            :isEdit="isEdit"
            :data="pointAndRebate"
            :isCommission="true"
            labelWidth="170px"
         />
    </div>
    <div slot="footer" class="dialog-footer">
        <template v-if="isEdit">
            <el-button :loading="loading" @click="handleCancel">
                {{ $t('agent.cancel') }}
            </el-button>
            <el-button type="primary" @click="handleOK">
                {{ $t('agent.submit') }}
            </el-button>
        </template>
    </div>
    </el-dialog>
</template>
<script>
import PointAndRebate from '@/components/PointAndRebate'

export default {
    name: 'CommissionsDialog',
    components: {
        PointAndRebate
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        row: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            loading: false,
            pointAndRebate: {
                commissionModel: 2,
				commissionRateList: []
            }
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.queyrCommissionRate()
            }
        }
    },
    methods: {
        handleCancel() {
            this.queyrCommissionRate()
            this.$emit('update:visible', false)
            this.$refs['PointAndRebateRef'].resetFields()
            this.$emit('refresh')
        },
        async handleOK() {
            try {
                await this.$refs['PointAndRebateRef'].validate()
                const { commissionRateList } = this.$refs['PointAndRebateRef'].getValues()
                const ret = await this.$api.commissionRateUpdate({
                    commissionRateList,
                    userId: this.row.userId,
                    merchantId: this.row.merchantId,
                    status: 1
                })

                if (ret.code === 200) {
                    this.handleCancel()
                }
            } catch (err) {
                console.error(err)
                throw err
            }
        },
        async queyrCommissionRate() {
			try {
                this.loading = true
				const res = await this.$api.commissionRateQuery({
					merchantId: this.row.merchantId,
					userName: this.row.userName,
                    version: this.row.version
				})
                this.loading = false
				if (res.code === 200) {
					this.pointAndRebate.commissionRateList = res.data
				}
			} catch (err) {
				throw err
			} finally {
                this.loading = false
            }
		}
    }
}
</script>

<style scoped>
    ::v-deep .commissionsDialog .commissionModel{
         display: none;
    }
    ::v-deep .commissionsDialog .pointTable {
        display: none;
    }
</style>
